<template>

	<div class="probdesc">
		<el-card class="descbox" :body-style=body_style>

			<h3>{{probForm.probId}}. {{probForm.probTitle}}</h3>

			<div class="content" v-html="probForm.probContent"></div>

		</el-card>


	</div>
</template>

<script>
	export default {

		data() {
			return {
				probForm: {
					probId: 0,
					probTitle: "",
					probContent: "",
				},
				body_style:{
					height:'100%',
					padding:'0',
				},
			};
		},
		watch: {
			"$route": "updateForm"
		},

		methods: {
			updateForm(probId) {
				this.probForm.probId = probId
				if (this.probForm.probId != null && this.probForm.probId != undefined) {
					const InspireCloud = require("@byteinspire/js-sdk");
					const myServiceId = "qcqsjd";
					const fnName = "prob_require_by_prob_id";

					// 创建轻服务实例
					const inspirecloud = new InspireCloud({
						serviceId: myServiceId,
					});

					// 调用轻服务函数
					inspirecloud
						.run(fnName, Object.assign({
							token: window.sessionStorage.getItem("token")
						}, this.probForm))
						.then((data) => {

							if (data.message) {
								this.$message.error(data.message);
							} else {
								this.probForm = data;
							}
						})
						.catch((error) => {
							// 处理异常
						});
				}
			}
		},
	}
</script>

<style>
	.probdesc {
		height: 85%;
		margin-top: 10px;
	}

	.descbox,
	.text_item {
		height: 100%;
	}
	.content {
		height: 100%;
		overflow: auto;
	}
</style>
